<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-eqiuv="X-UA-Compatible" content="IE-edge">
		<title>bootstrap</title>
		<link href="css/bootstrap.css" rel="stylesheet">
		<script src="js/jquery.min.js"></script>
		<script src="js.bootstrap.min.js"></script>
		<style>
			.row div{
				background:#ccc;
				border:1px solid red;
			}
			hr{
				border:1px solid #666;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- 列偏移，添加类.col-md-offset-*，只能向右移，后面的都会向右移 -->
			<div class="row">
				<div class="col-md-4">col-md</div>
				<div class="col-md-4 col-md-offset-2">col-md</div>
				<div class="col-md-2">col-md</div>
			</div>
			<div class="row">
				<div class="col-md-4 col-md-offset-2">col</div>
				<div class="col-md-4">col</div>
			</div>
			<hr>
			
			<!-- 列排序，添加类.col-md-push-*（向右）和.col-md-pull*（向前），可以交换的位置 -->
			<div class="row">
				<div class="col-md-4 col-md-push-2">col1</div>
				<div class="col-md-2 col-md-pull-4">col2</div>
				<div class="col-md-4">col3</div>
			</div>
			<hr>
			
			<!-- 列嵌套 -->
			<div class="row">
				<div class="col-md-6">
					<div class="row">
						<div class="col-md-3">td</div>
						<div class="col-md-3">td</div>
						<div class="col-md-3">td</div>
						<div class="col-md-3">td</div>
					</div>
				</div>
				<div class="col-md-6">
					2
				</div>
			</div>



		</div>

	</body>
</html>
